<template>
	<view class="page-container">
		<!-- 收货地址区域 -->
		<u-cell title="收货地址" is-link @click="onSelectAddress">
			<view slot="label" class="u-slot-label">
				<u-row>姓名：{{ address.name }}</u-row>
				<u-row>电话：{{ address.tel }}</u-row>
				<u-row>地址：{{ address.city + address.county + address.address_detail }}</u-row>
			</view>
		</u-cell>

		<u-gap height="10"></u-gap>
		<!-- 商品列表 -->
		<view class="u-product" v-for="(item, i) in productList" :key="i" @click="onDetail(item.id)">
			<view class="__left"><u--image :src="$fullUrl(item.pic)" width="80" height="80"></u--image></view>
			<view class="__right">
				<text class="__title u-line-1">{{ item.name }}</text>
				<text class="__spec u-line-1">{{ item.spec }}</text>
				<text class="__price">
					${{ item.price }}
					<span class="__count">x{{ item.count }}</span>
				</text>
			</view>
		</view>

		<u-gap height="10"></u-gap>
		<!-- 配送信息 -->
		<u-cell title="配送服务" label="快递运输,工作日、双休日与节假日均可送货" />

		<!-- 订单备注 -->
		<u-form-item label="订单备注"><u--textarea v-model="remark" placeholder="请输入订单备注"></u--textarea></u-form-item>
		<!-- 商品总额 -->
		<u-cell title="商品总额"><u--text slot="value" mode="price" :text="amount" color="red" bold align="right"></u--text></u-cell>

		<!-- 创建订单按钮 -->
		<u-button type="primary" size="large" @click="onClickCreateOrder">创建订单</u-button>
	</view>
</template>

<script>
//地址
import * as AddressAPI from '@/api/address.js';
//商品
import * as CartAPI from '@/api/cart.js';
//订单
import * as OrderAPI from '@/api/order.js';

export default {
	name: 'orderCreate',
	data() {
		return {
			address: {id:null}, //地址对象
			productList: [], //商品列表
			remark: '' //备注
		};
	},
	
	// 生命周期方法
	onLoad() {		
		// 设置全局事件（ 在AddressList 页面选中后触发该事件）
		uni.$on("addressChanged",this.onAddressChanged);
		// 获取收货地址
		this.getAddress();
		
		//获取购物车勾选商品
		CartAPI.getCartListChecked().then(result => {			
			this.productList = result.data;
		});
	},
	
	onUnload(){
		// 取消事件监听
		uni.$off("addressChanged");
	},

	computed: {
		//计算总金额
		amount() {
			let total = 0;
			this.productList.forEach(item => {
				total += item.count * item.price;
			});
			return total.toFixed(2);
		}
	},

	methods: {
		// 从后端获取收货地址(参数为空，返回默认地址，否则返回该id对应地址)
		getAddress(){
			AddressAPI.getDefaultAddress(this.address.id).then(result => {
				if (result.data.length > 0) {
					this.address = result.data[0]; //
				} else {
					uni.$u.toast('请先添加收货地址');
					//关闭当前页面 导航到收货地址列表中去新建及选择地址
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/address/AddressList'
						});
					}, 1000);
				}
			});
		},
		
		// 保留当前页面，导航到地址列表选择
		onSelectAddress(){
			uni.navigateTo({
				url:"/pages/address/AddressList?addressId=" + this.address.id
			})
		},
		
		// 监听全局事件
		onAddressChanged(e){
			this.address.id = e.addressId;
			this.getAddress();			
		},
		//处理创建订单
		onClickCreateOrder() {
			// this.$toast("创建订单，待完成...");
			//准备参数
			let productList = []; //商品列表
			this.productList.forEach(item => {
				productList.push({
					product_id: item.product_id,
					count: item.count,
					price: item.price
				});
			});

			let params = {
				//参数结构 参见API接口文档
				address_id: this.address.id,
				remark: this.remark,
				productList: productList
			};
			//调用API接口，创建订单
			OrderAPI.createOrder(params).then(result => {
				//显示API调用返回信息，具体参见接口文档
				uni.$u.toast(result.msg);
				//创建成功后关闭当前页面导航到订单列表页面
				setTimeout(() => {
					uni.redirectTo({
						url: '/pages/order/OrderList'
					});
				}, 1000);
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.page-container {
	display: flex;
	flex-direction: column;
	background: white;
	overflow: hidden;
	padding: 15px 15px 15px 15px;
}
</style>
